<template>
  <view class="component-demo">
    <view v-if="!component" class="text-center text-gray-500 py-8">
      请选择一个组件查看演示
    </view>
    
    <view v-else class="space-y-4">
      <!-- 按钮组件演示 -->
      <view v-if="component.type === 'button'" class="space-y-3">
        <view class="text-sm text-gray-600 mb-2">按钮组件演示</view>
        <van-button type="primary" size="large" block>主要按钮</van-button>
        <van-button type="success" size="large" block>成功按钮</van-button>
        <van-button type="warning" size="large" block>警告按钮</van-button>
        <van-button type="danger" size="large" block>危险按钮</van-button>
        <van-button type="default" size="large" block>默认按钮</van-button>
      </view>

      <!-- 单元格组件演示 -->
      <view v-else-if="component.type === 'cell'" class="space-y-3">
        <view class="text-sm text-gray-600 mb-2">单元格组件演示</view>
        <van-cell title="单元格" value="内容" />
        <van-cell title="单元格" value="内容" label="描述信息" />
        <van-cell title="单元格" value="内容" is-link />
        <van-cell title="单元格" value="内容" is-link arrow-direction="down" />
      </view>

      <!-- 图标组件演示 -->
      <view v-else-if="component.type === 'icon'" class="space-y-3">
        <view class="text-sm text-gray-600 mb-2">图标组件演示</view>
        <view class="flex flex-wrap gap-4">
          <van-icon name="home-o" size="24" />
          <van-icon name="search" size="24" />
          <van-icon name="friends-o" size="24" />
          <van-icon name="setting-o" size="24" />
          <van-icon name="like-o" size="24" />
          <van-icon name="chat-o" size="24" />
          <van-icon name="star-o" size="24" />
          <van-icon name="phone-o" size="24" />
        </view>
      </view>

      <!-- 输入框组件演示 -->
      <view v-else-if="component.type === 'field'" class="space-y-3">
        <view class="text-sm text-gray-600 mb-2">输入框组件演示</view>
        <van-field v-model="fieldValue" label="用户名" placeholder="请输入用户名" />
        <van-field v-model="fieldValue2" type="password" label="密码" placeholder="请输入密码" />
        <van-field v-model="fieldValue3" type="textarea" label="留言" placeholder="请输入留言" />
      </view>

      <!-- 开关组件演示 -->
      <view v-else-if="component.type === 'switch'" class="space-y-3">
        <view class="text-sm text-gray-600 mb-2">开关组件演示</view>
        <van-cell center title="开启">
          <template #right-icon>
            <van-switch v-model="switchValue" />
          </template>
        </van-cell>
        <van-cell center title="关闭">
          <template #right-icon>
            <van-switch v-model="switchValue2" />
          </template>
        </van-cell>
      </view>

      <!-- 滑块组件演示 -->
      <view v-else-if="component.type === 'slider'" class="space-y-3">
        <view class="text-sm text-gray-600 mb-2">滑块组件演示</view>
        <van-slider v-model="sliderValue" />
        <view class="text-center text-sm text-gray-500">当前值: {{ sliderValue }}</view>
      </view>

      <!-- 步进器组件演示 -->
      <view v-else-if="component.type === 'stepper'" class="space-y-3">
        <view class="text-sm text-gray-600 mb-2">步进器组件演示</view>
        <van-stepper v-model="stepperValue" />
        <view class="text-center text-sm text-gray-500">当前值: {{ stepperValue }}</view>
      </view>

      <!-- 标签组件演示 -->
      <view v-else-if="component.type === 'tag'" class="space-y-3">
        <view class="text-sm text-gray-600 mb-2">标签组件演示</view>
        <view class="flex flex-wrap gap-2">
          <van-tag type="primary">主要标签</van-tag>
          <van-tag type="success">成功标签</van-tag>
          <van-tag type="warning">警告标签</van-tag>
          <van-tag type="danger">危险标签</van-tag>
          <van-tag type="default">默认标签</van-tag>
        </view>
      </view>

      <!-- 徽标组件演示 -->
      <view v-else-if="component.type === 'badge'" class="space-y-3">
        <view class="text-sm text-gray-600 mb-2">徽标组件演示</view>
        <view class="flex items-center gap-4">
          <van-badge content="5">
            <view class="w-10 h-10 bg-gray-200 rounded"></view>
          </van-badge>
          <van-badge content="99+">
            <view class="w-10 h-10 bg-gray-200 rounded"></view>
          </van-badge>
          <van-badge content="新">
            <view class="w-10 h-10 bg-gray-200 rounded"></view>
          </van-badge>
        </view>
      </view>

      <!-- 进度条组件演示 -->
      <view v-else-if="component.type === 'progress'" class="space-y-3">
        <view class="text-sm text-gray-600 mb-2">进度条组件演示</view>
        <van-progress :percentage="progressValue" />
        <van-progress :percentage="progressValue" color="#f2826a" />
        <van-progress :percentage="progressValue" color="#ee0a24" />
        <view class="text-center text-sm text-gray-500">当前进度: {{ progressValue }}%</view>
      </view>

      <!-- 默认演示 -->
      <view v-else class="text-center text-gray-500 py-8">
        {{ component.name }} 组件演示即将推出...
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

// 组件属性
const props = defineProps<{
  component: any
}>()

// 表单数据
const fieldValue = ref('')
const fieldValue2 = ref('')
const fieldValue3 = ref('')
const switchValue = ref(true)
const switchValue2 = ref(false)
const sliderValue = ref(50)
const stepperValue = ref(1)
const progressValue = ref(30)

// 监听进度条变化
watch(() => props.component, () => {
  if (props.component?.type === 'progress') {
    // 模拟进度条动画
    const interval = setInterval(() => {
      progressValue.value += 10
      if (progressValue.value >= 100) {
        progressValue.value = 0
      }
    }, 1000)
    
    // 清理定时器
    setTimeout(() => {
      clearInterval(interval)
    }, 10000)
  }
}, { immediate: true })
</script>

<style lang="scss" scoped>
.component-demo {
  @apply p-4;
}

// 组件演示样式
.space-y-3 > view {
  @apply mb-3;
}

.space-y-4 > view {
  @apply mb-4;
}

// 徽标样式
.van-badge {
  @apply inline-block;
}

// 进度条样式
.van-progress {
  @apply mb-2;
}
</style>
